<template>
  <div>
    <div class="flex recommend_form">
      <crop-upload
        show-type="photo"
        accept=".png"
        :init-val="formData.goods_img"
        wrapper-width="90px"
        wrapper-height="90px"
        :img-width="500"
        :img-height="500"
        @setVal="(val)=>{formData.goods_img=val}"
      ></crop-upload>
      <div class="flex-1 input_wrapper">
        <div class="flex name">
          <label class="flex align-center justify-center"><span class="required-icon">*</span>名称</label>
          <el-input
            type="text"
            placeholder="最多展示10个字段"
            v-model="formData.goods_name"
            maxlength="20"
          >
          </el-input>
        </div>
        <div
          v-if="showSubtitle"
          class="flex price"
        >
          <label class="flex align-center justify-center">标语</label>
          <el-input
            type="text"
            placeholder="请输入每天租赁价格"
            v-model="formData.goods_title"
            maxlength="20"
          >
          </el-input>
        </div>
      </div>

    </div>
    <goods-link
      v-if="formData.goodsData"
      ref="goodsLink"
      :goods-data="formData.goodsData"
      :show-sort="false"
      :show-tool="showTool"
      @handleDelete="deleteGoods"
    ></goods-link>
    <div
      v-else-if="showTool"
      class="add-div"
      @click="openSelect"
    >
      <i class="el-icon-plus"></i>选择商品链接
    </div>
    <goods-dialog
      ref="goodsDialog"
      dialog-width="1340px"
      :page-size="12"
      :show-type-select="true"
      :show-checked-tool="showCheckedTool"
      @setSelect="setSelect"
    ></goods-dialog>
  </div>
</template>

<script>
import goodsLink from "../compoments/goodsLink";
import goodsDialog from "@/components/goodsDialog.vue";
import cropUpload from "@/components/cropUpload";
export default {
  components: { goodsLink, goodsDialog, cropUpload },
  props: {
    formData: {
      type: Object,
      default: {}
    },
    showSubtitle: {
      type: Boolean,
      default: true
    },
    showTool: {
      type: Boolean,
      default: true
    },
    showCheckedTool: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      goodsData: null
    }
  },
  methods: {
    // 删除商品链接
    deleteGoods() {
      this.$set(this.formData, 'goods_id', null);
      this.$set(this.formData, 'goodsData', null);
    },
    // 设置选中的商品
    setSelect(goodsList) {
      this.$set(this.formData, 'goods_id', goodsList[0].goods_id);
      this.$set(this.formData, 'goodsData', goodsList[0]);
    },
    openSelect() {
      this.$refs.goodsDialog.dialogVisible = true;
    },
  }
}
</script>

<style lang="scss" scoped>
.recommend_form {
  margin-bottom: 10px;
}
</style>